<template>
	<div class="ctfQuestion-warp">
	    <Row style="margin-bottom:10px">
        	<Col span="3">
        		<!--<Button type="primary" class="md-add-jh" @click="addTag"></Button>-->
        	</Col>
    	</Row>
    	<Form :label-width="80" :model="formValidate" ref="formValidate">
    		
	        <FormItem
                v-for="(item, index) in formValidate.tagList"
                :key="index"
                :label="'标签' + (index+1)+'：'"
                :prop="'tagList.' + index + '.tag'"
                :rules="{required: item.edit, message: '标签 ' + (index+1) +'不能为空', trigger: 'change'}">
	            <Row>
	                <Col span="16">
	                    <Input type="text" v-model.trim="item.tag" placeholder="输入一些东西..." v-if="item.edit"></Input>
	                    <span v-if="!item.edit">{{item.tag}}</span>
	                </Col>
	                <Col span="6" offset="1">
	                	<Button @click="saveCtfTags(item)" v-if="item.edit" size="small" type="primary">确定</Button>
	                	<Button @click="item.edit = true" v-if="!item.edit" size="small" type="primary">修改</Button>
	                    <Button @click="removeTag(index)" v-if="!item.tagId" size="small" type="error">删除</Button> 
	                    <Button @click="delCtfTags(item.tagId)" v-if="item.tagId" size="small" type="error">删除</Button>
	                </Col>
	            </Row>
	        </FormItem>
	        <FormItem>
	            <Row>
	                <Col span="12">
	                    <Button type="primary" ghost long @click="addTag" class="md-add-jh">添加</Button>
	                </Col>
	            </Row>
	        </FormItem>
	    </Form>
	</div>
</template>
<script>
	import {createCtfTags,modifyCtfTags,delCtfTags,queryCtfTags} from '@/api/question'
	export default {
		 props:['chaId','show'],
		data(){
			return{
				index:0,
				tagList:[],
				totalCount:0,
				tag:{},
				tagModal:{
					show:false,
					loading:true,
					title:'添加Tag'
				},
				tagInfo:{tagList:[]},
				formValidate:{
//					chaId: this.chaId,
//					tag: "",
					tagList:[]
				},
				ruleValidate:{
					tag:[
					   { required: true, message: '提示内容不能为空', trigger: 'change' }
					]
				},
				tagCol:[
					{
						title: '名称',
						key: 'tag',
//						align: 'center',
						ellipsis: true,
						tooltip:true,
						render:(h,params) => {
							if(params.row.edit){
								return h('Input',{
									props:{
										value:params.row.value,
										type:'textarea',
										maxlength:200,
										autosize:"{minRows: 2,maxRows: 5}"
									}
								})
							}else{
								return h('span',params.row.tag)
							}
						}
					},
//					{
//						title: 'createTime',
//						key: 'createTime',
//						align: 'center',
//						ellipsis: true,
//						tooltip:true
//					},
					{
					    title:'操作',
					    width:140,
					    render:(h,params) => {
					    	return h('div', [
					    	    h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
//											this.tagModal.show = true;
//											this.tagModal.title = '修改tag';
//											this.getCtfTagsInfo(params.row);
//											params.row.edit = true;
											this.saveCtfTags(params.row);
										}
									}
								}, '确定'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
//											this.tagModal.show = true;
//											this.tagModal.title = '修改tag';
//											this.getCtfTagsInfo(params.row);
											params.row.edit = true;
										}
									}
								}, '修改'),
								h('Poptip', {
									props: {
										confirm: true,
										'ok-text': "确定",
										'cancel-text': "取消",
										type: 'error',
										size: 'large',
										title: '你确定要删除吗?',
										transfer:true
									},
									style: {
										marginLeft: '0px'
									},
									on: {
										'on-ok': () => {
											this.delCtfTags(params.row.tagId)
										}
									}
								}, [
									h('Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
									}, '删除')
								])
							])
					    }
					},
				]
      		}
		},
		computed:{

		},
		filters:{

		},
		watch:{
			'chaId':function(id){
				this.formValidate.chaId = id;
			},
			'show':function(id){
				this.queryCtfTags();
			}
		},
		methods:{
			addTag(){
				this.index ++ ;
				this.tagList.push({tag:'',index:this.index,chaId:this.chaId,edit:true})
			},
			removeTag(index){
				this.tagList.splice(this.tagList.findIndex(tag => tag.index === index), 1)
			},
			queryCtfTags(){
				queryCtfTags(this.chaId).then(data => {
					if(data.code == 1){
						this.tagList = data.data.items || data.data;
						this.formValidate.tagList = this.tagList;
						this.tagList.forEach(tag => {
							this.$set(tag,'edit',false);
						})
						if(data.data.items){
							this.index = data.data.items.length;
						}
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			delCtfTags(id){
				delCtfTags(id).then(data => {
					if(data.code == 1){
						this.$Message.info('操作成功');
						this.queryCtfTags();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			modifyCtfTags(){
				if(this.tag.tag == ''){
					this.$Message.warning('提示内容不能为空');
					return
				}
				modifyCtfTags(this.tag).then(data => {
//					this.cancelLoading('tagModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
//						this.tagModal.show = false;
						let boardCast = {
							chaId:this.chaId,
							op:"修改",
							type:"提示",
							name:this.tag.tag
						}
						this.$emit('addBoardCast', boardCast)
						this.queryCtfTags();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			createCtfTags(){
				if(this.tag.tag == ''){
					this.$Message.warning('提示内容不能为空');
					return
				}
				createCtfTags(this.tag).then(data => {
//					this.cancelLoading('tagModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
//						this.tagModal.show = false;
						this.queryCtfTags();
						let boardCast = {
							chaId:this.chaId,
							op:"添加",
							type:"提示",
							name:this.tag.tag
						}
						this.$emit('addBoardCast', boardCast)
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			saveCtfTags(tag){
				this.tag = tag;
//				this.$refs['formValidate'].validate((valid) => {
//          		if (valid) {
            			if(!tag.tagId){
            				this.createCtfTags();
            			}else{
            				this.modifyCtfTags()
            			}
//          		}else{
//          			this.cancelLoading('ctfModal');
//          		}
//          	})
			},
			getCtfTagsInfo(data){
				this.formValidate = JSON.parse(JSON.stringify(data));
			},
			changePage(page){
				this.queryCtfInfo.page = page;
				this.queryCtfList();
			},
			changeSize(size){
				this.queryCtfInfo.rows = size;
				this.queryCtfList();
			},
			cancelLoading(name){
		    	this[name].loading = false;
		      	setTimeout(() => {
		      		this[name].loading = true;
		      	})
		    },
		    cancel(name){
		  		this.$refs[name].resetFields();
		  	},
		},
		mounted(){
			
		},
		created(){

		}
	}
</script>
